<template>
  <div>
    <div class="tab">
      <el-card>
        <el-tabs v-model="activeName">
          <!-- 登录账户设置 -->
          <el-tab-pane label="登录账户设置" name="first">
            <el-form
              ref="myForm"
              :rules="rules"
              :model="userForm"
              class="tba_user"
            >
              <!-- 姓名 -->
              <el-form-item label="姓名" label-width="100px" prop="username">
                <el-input v-model="userForm.username" />
              </el-form-item>

              <!-- 密码 -->
              <el-form-item label="密码" label-width="100px" prop="password">
                <el-input v-model="userForm.password" type="password" />
              </el-form-item>

              <!-- 按钮 -->
              <div class="submit">
                <el-button type="primary" @click="getSubmit"> 确 定 </el-button>
                <el-button @click="cancel">取 消</el-button>
              </div>
            </el-form>
          </el-tab-pane>

          <!-- 个人详情 -->
          <el-tab-pane label="配置管理" name="second">
            <ParticularsInfo />
          </el-tab-pane>

          <!-- 岗位信息  -->
          <el-tab-pane label="角色管理" name="third">岗位信息</el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script lang="js">
import {
  // 获取员工基本信息
  getBasicUserApi,
  // 保存员工基本信息
  getAddUserApi
} from '@/api/approvalsApi.js'
// 导入详情组件
import ParticularsInfo from '@/views/attendances/employeeInfo/components/particularsInfo'
export default {
  name: 'EmployeeInfo',
  components: {
    ParticularsInfo
  },
  data() {
    return {
      activeName: 'first',
      userForm: {
        name: '1',
        password: ''

      },
      rules: {
        username: [{ required: true, message: '姓名不能为空', trigger: 'change' },
          { min: 1, max: 50, message: '姓名长度: 1~50个字符之间', trigger: 'change' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'change' },
          { min: 1, max: 50, message: '密码长度: 1~50个字符之间', trigger: 'change' }
        ]
      },
      userId: this.$route.query.id
    }
  },
  mounted() {
    this.getInfoData()
  },
  methods: {
    // 取消按钮
    cancel() {

    },
    getSubmit() {
      this.$refs.myForm.validate(async res => {
        if (res) {
          const res = await getAddUserApi(this.userForm)
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.push('/attendances')
        }
      })
    },
    // 路由跳转 获取员工基本信息
    async getInfoData() {
      const res = await getBasicUserApi(this.userId)
      this.userForm = res.data
    }

  }

}
</script>

<style lang="scss">
.tab {
  margin: 30px 30px;
  .tba_user {
    margin-left: 200px;
    margin-top: 50px;
    input.el-input__inner {
      width: 400px;
    }
    .submit {
      margin-left: 100px;
    }
  }
}
</style>
